import React, {useEffect, useState, useRef} from 'react';
import {
    Avatar,
    Button,
    Card,
    ColorPicker,
    DatePicker,
    Form,
    Input,
    message,
    Modal,
    Popover,
    Tag
} from 'antd';
import {FormOutlined, LikeOutlined} from '@ant-design/icons';
import {Timeline} from 'antd';
import moment from "moment";
import {HTTP} from '@/utils/HTTP.js'
import useLogItems from "@/hooks/getLogItems.js";
import {List, Space} from 'antd';
import useMessageBoards from "@/hooks/getMessageBoards.js";

// 日志组件
const Log = () => {
    // 点击显示对话框
    const [isModalOpenLog, setIsModalOpenLog] = useState(false);
    const [isModalOpenBoard, setIsModalOpenBoard] = useState(false);
    // 拿到表单实例
    const [formLog] = Form.useForm();
    const [formMessageBoard] = Form.useForm();
    // 给编辑按钮绑定点击事件
    const onchangeLog = () => {
        setIsModalOpenLog(true)
    }
    const onchangeBoard = () => {
        setIsModalOpenBoard(true)
    }
    // 点击提交
    const onSubmitLog = async () => {
        const {uid, label, color, children} = formLog.getFieldsValue();
        // 提交数据
        const res = await HTTP({
            url: '/log/create',
            method: 'POST',
            data: {
                uid,
                label: label ? moment(label.$d).format('YYYY-MM-DD') : '',
                color: color ? `rgb(${color.metaColor.r},${color.metaColor.g},${color.metaColor.b})` : '',
                children
            }
        })
        // 判断提交是否成功
        if (res.code === 104) {
            setIsModalOpenLog(false)
            message.success('添加成功')
        } else {
            message.error('添加失败')
        }
    }

    const data = JSON.parse(localStorage.getItem('admin'))
    const onSubmitBoard = async () => {
        const {content} = formMessageBoard.getFieldsValue();
        const res = await HTTP({
            url: '/messageBoard/create',
            method: 'POST',
            data: {
                content: content,
                avatar: data.imgPath,
                title: data.username,
                LikeCount: 0
            }
        })
        if (res.code === 104) {
            setIsModalOpenBoard(false)
            message.success('添加成功')
        } else {
            message.error('添加失败')
        }
    }

    const {logList} = useLogItems();
    // 加工日志数据
    const [mapList, setMapList] = useState([])
    useEffect(() => {
        setMapList(logList.map((item, index) => {
            return {
                key: index,
                label: item.label && <Tag color={item.color}>{item.label}</Tag>,
                children: item.children,
            }
        }))
    }, [logList]);

    // 获取留言板数据
    const {messageBoardList} = useMessageBoards();
    return (<div style={{display: "flex"}}>
        <Card
            title={<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                <p>项目日志</p>
                <Popover content={'编辑日志'}>
                    <Button type={'default'} icon={<FormOutlined/>} onClick={() => onchangeLog()}></Button>
                </Popover>
            </div>}
            style={{width: '35%', height: 620, overflowY: 'auto', overflowX: 'auto'}}>
            <Timeline
                mode="left"
                items={mapList}
            />
            <div>
                <Modal okText={"提交"} cancelText={"返回"} title="编辑日志" open={isModalOpenLog} onOk={onSubmitLog}
                       onCancel={() => {
                           setIsModalOpenLog(false);
                       }}>
                    <div>
                        <Form
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            style={{
                                width: 400,
                            }}
                            form={formLog}
                        >
                            <Form.Item
                                label={"UID"}
                                name="uid"
                                rules={[
                                    {
                                        required: true,
                                        message: 'UID必须填写',
                                    }
                                ]}
                            >
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                label="时间(选填)"
                                name="label"
                            >
                                <DatePicker/>
                            </Form.Item>
                            <Form.Item
                                label="颜色(选填)"
                                name="color"
                            >
                                <ColorPicker size="large" format={'rgb'} showText/>
                            </Form.Item>
                            <Form.Item
                                label="日志内容"
                                name="children"
                                rules={[{
                                    required: true, message: '内容必须填写',
                                },]}
                            >
                                <Input.TextArea autoSize={{minRows: 2, maxRows: 3}}/>
                            </Form.Item>
                        </Form>
                    </div>
                </Modal>
            </div>
        </Card>

        {/*留言板组件*/}
        <Card
            title={<div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                <p>留言板</p>
                <Popover content={'编辑留言'}>
                    <Button type={'default'} icon={<FormOutlined/>} onClick={() => onchangeBoard()}></Button>
                </Popover>
            </div>}
            style={{width: '65%', height: 620, marginLeft: 5, overflowY: 'auto'}}>

            <List
                itemLayout="vertical"
                size="large"
                dataSource={messageBoardList}
                footer={<div>
                    <h3>欢迎大家积极留言！</h3>
                </div>}
                renderItem={(item) => (<List.Item
                    key={item.title}
                    actions={[<div
                        style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center"
                        }}>
                        <div style={{display: "flex", alignItems: "center", cursor: "pointer", marginRight: 330}}>
                            <LikeOutlined
                                style={{fontSize: 16}}/><p style={{marginLeft: 5, fontSize: 16}}>{item.LikeCount}</p>
                        </div>
                        <p>{moment(item.createdAt).format("YYYY-MM-DD")}</p>
                    </div>]}
                    extra={<img
                        width={272}
                        alt="logo"
                        style={{borderRadius: 10}}
                        src="https://img.zcool.cn/community/01d8d75774d6ed0000012e7e6dccd3.jpg@1280w_1l_2o_100sh.jpg"
                    />}
                >
                    <List.Item.Meta
                        avatar={<Avatar size={45} src={`http://127.0.0.1:3031/${item.avatar}`}/>}
                        title={item.title}
                    />
                    <p style={{textIndent: '2rem'}}>{item.content}</p>
                </List.Item>)}
            />

            {/*留言板表单*/}
            <div>
                <Modal okText={"提交"} cancelText={"返回"} title="编辑留言板" open={isModalOpenBoard}
                       onOk={onSubmitBoard}
                       onCancel={() => {
                           setIsModalOpenBoard(false);
                       }}>
                    <div>
                        <Form
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            style={{
                                width: 400,
                            }}
                            form={formMessageBoard}
                        >
                            <Form.Item
                                label="留言板内容"
                                name="content"
                                rules={[{
                                    required: true, message: '内容必须填写',
                                },]}
                            >
                                <Input.TextArea autoSize={{minRows: 2, maxRows: 3}}/>
                            </Form.Item>
                        </Form>
                    </div>
                </Modal>
            </div>
        </Card>
    </div>);
};
export default Log;